// 基于静态结构封装函数式组件，实现随地随需调用
// 1:导入静态结构组件
import XtxMessage from './index.vue'
// 2：导入h()函数和render()函数
import { createVNode, render } from 'vue'
// render()函数返回一个执行h()函数的操作，即为返回一个执行createVNode函数的操作

export function BrMessage ({ type, text }) {
  // 1：生成一个VNode
  const VNode = createVNode(XtxMessage, { type, text })
  // 2：生成一个标签/容器
  const container = document.createElement('div')
  // 3：把容器添加到页面中
  document.body.appendChild(container)
  // 根据render函数的执行机制实现：把虚拟节点渲染到页面中的container容器中
  render(VNode, container)
  setTimeout(() => {
    render(null, container)
  }, 1500)
}
